<template>
  <Pad>
    <div class="userInfo">
      <div class="userInfo-info">
        <img :src="userInfo.headImgUrl" alt class="avatar" />
        <div class="userInfo-middle">
          <div class="userInfo-name">{{ userInfo.nickname }}</div>
          <div class="userInfo-tag">我献浆，我倡议</div>
        </div>
        <!-- <div class="identity">{{ userInfo.status }}</div> -->
        <!-- <img :src="userInfo.unionId" alt class="userInfo-qrcode" /> -->
        <yd-lightbox>
          <yd-lightbox-img :src="userInfo.unionId" alt class="userInfo-qrcode" />
        </yd-lightbox>
      </div>
      <van-row>
        <van-col span="12" class="userInfo-col">
          <router-link to="/income">
            <div class="shouyi">{{userInfo.inCome }}</div>
            <div>收益</div>
          </router-link>
        </van-col>
        <van-col span="12" class="userInfo-col">
          <router-link to="/points">
            <div class="jifen">{{ userInfo.integrals }}</div>
            <div>积分</div>
          </router-link>
        </van-col>
      </van-row>
    </div>
    <van-cell-group class="links">
      <van-cell title="基本信息" is-link to="/userInfo" icon="user-o">
        <img :src="require('./img/userInfo.png')" alt slot="icon" class="icon" />
      </van-cell>
      <van-cell title="献浆记录" is-link to="/donateList" icon="notes-o">
        <img :src="require('./img/pulpRecord.png')" alt slot="icon" class="icon" />
      </van-cell>
      <van-cell title="收藏文章" is-link to="/collects" icon="notes-o">
        <img :src="require('./img/collects.png')" alt slot="icon" class="icon" />
      </van-cell>
      <van-cell title="使用帮助" is-link to="index" icon="info-o">
        <img :src="require('./img/help.png')" alt slot="icon" class="icon" />
      </van-cell>
      <van-cell title="消息通知" is-link to="/notice" icon="info-o">
        <img :src="require('./img/notice.png')" alt slot="icon" class="icon" />
      </van-cell>
    </van-cell-group>
  </Pad>
</template>

<script>
import Pad from "@/components/pad";
import { mapState, mapGetters } from "vuex";
import store from "@/store";
import { incomeList } from "@/api/user";

export default {
  data() {
    return {};
  },
  created() {
    console.log("userInfo");
    console.log(this.userInfo);
  },
  components: {
    Pad
  },
  computed: {
    ...mapGetters(["userInfo"])
  }
};
</script>

<style lang='scss'>
.userInfo {
  height: 4.266667rem /* 320/75 */;
  padding: 0.4rem /* 30/75 */;
  background-color: #fff;
  box-shadow: 0px 3px 33px 2px rgba(205, 205, 205, 0.41);
  border-radius: 0.213333rem /* 16/75 */;
  margin-bottom: 0.4rem /* 30/75 */;
  &-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(247, 247, 251, 1);
    position: relative;
    .avatar {
      width: 1.866667rem /* 140/75 */;
      height: 1.866667rem /* 140/75 */;
      margin-right: 0.48rem /* 36/75 */;
    }
    .identity {
      text-align: center;
      position: absolute;
      right: -0.4rem /* 30/75 */;
      top: 0.266667rem /* 20/75 */;
      padding: 0 0.32rem /* 24/75 */;
      height: 0.8rem /* 60/75 */;
      line-height: 0.8rem /* 60/75 */;
      font-size: 0.32rem /* 24/75 */;
      font-weight: bold;
      color: rgba(34, 34, 34, 1);
      background-color: #ffde0f;
      border-radius: 0.4rem /* 30/75 */ 0 0 0.4rem /* 30/75 */;
    }
  }
  &-middle {
    flex: 1;
    overflow: hidden;
  }
  &-name {
    font-size: 0.453333rem /* 34/75 */;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 0.293333rem /* 22/75 */;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &-tag {
    font-size: 0.266667rem /* 20/75 */;
    font-weight: 400;
    color: #4482ff;
  }
  &-qrcode {
    width: 2rem /* 150/75 */;
    height: 2rem /* 150/75 */;
  }
  &-col {
    text-align: center;
    color: #cccccc;
    font-size: 0.32rem /* 24/75 */;
    padding-top: 0.4rem /* 30/75 */;
  }
  .shouyi,
  .jifen {
    font-size: 0.533333rem /* 40/75 */;
    margin-bottom: 0.32rem /* 24/75 */;
  }
  .shouyi {
    color: #ff4a50;
  }
  .jifen {
    color: #333333;
  }
}
.links {
  border-radius: 0.213333rem /* 16/75 */;
  overflow: hidden;
  .icon {
    width: 0.533333rem /* 40/75 */;
    margin-right: 0.4rem /* 30/75 */;
  }
}
</style>
